<template>
  <div>
    <mt-header title="用户注册" class="registerColor">
      <mt-button slot="left" icon="back" @click="goback"></mt-button>
      <router-link to="/login" slot="right">登录</router-link>
    </mt-header>
    <div class="main">
      <div class="logo">
        <img src="/img/logo.jpg" alt="" />
      </div>
      <mt-field
        label="用户名"
        placeholder="请输入昵称"
        type="text"
        v-model="name"
        :state="nameState"
        @blur.native.capture="checkName"
      ></mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="pwd"
        :state="pwdState"
        @blur.native.capture="checkPwd"
      ></mt-field>
      <mt-field
        label="确认密码"
        placeholder="请再次输入密码"
        type="password"
        v-model="repwd"
        :state="repwdState"
        @blur.native.capture="checkRepwd"
      ></mt-field>
      <mt-field
        label="手机号"
        placeholder="请输入手机号"
        type="text"
        v-model="phone"
        :state="phoneState"
        @blur.native.capture="checkPhone"
      ></mt-field>
      <mt-button size="large" class="registerColor size" @click="checkForm"
        >点击注册</mt-button
      >
    </div>
  </div>
</template>



<style scoped>
.registerColor {
  background: #cd5c5c;
  color: #fff;
}
.main {
  margin: 0 10%;
}
.logo > img {
  width: 50%;
  margin-left: 25%;
}
.size {
  width: 60%;
  margin: auto;
  margin-top: 20px;
}
</style>

<script>
export default {
  data() {
    return {
      name: "",
      nameState: "",
      pwd: "",
      pwdState: "",
      repwd: "",
      repwdState: "",
      phone: "",
      phoneState: "",
    };
  },
  methods: {
    checkForm() {
      /** 验证表单 */
      this.checkName(); // 验证用户名
      this.checkPwd();
      this.checkRepwd();
      this.checkPhone();
      if (
        this.nameState == "success" &&
        this.pwdState == "success" &&
        this.repwdState == "success" &&
        this.phoneState == "success"
      ) {
        console.log(`注册成功`);
        // 发送注册请求
        this.axios.post('/register/register',`uname=${this.name}&upwd=${this.pwd}&uphone=${this.phone}`).then(result=>{
          console.log(result)
          if(result.data.code==200){
            // 弹窗提示注册成功
            this.$toast({
              message:'注册成功',
              position:'bottom',
              duration:3000
            })
            this.$router.push('/login')
          }else if(result.data.code==201){
            // 弹窗提示注册失败
            this.$toast({
              messageP:'该用户已存在',
              position:'bottom',
              duration:3000
            })
          }
        })

      } else {
        console.log(`失败`);
      }
    },

    /** 验证用户名 */
    checkName() {
      var reg = /^\w{6,15}$/;
      reg.test(this.name)
        ? (this.nameState = "success")
        : (this.nameState = "error");
    },
    checkPwd() {
      var reg = /^\d{6}$/;
      reg.test(this.pwd)
        ? (this.pwdState = "success")
        : (this.pwdState = "error");
    },
    checkRepwd() {
      var reg = /^\d{6}$/;
      reg.test(this.repwd) && this.repwd == this.pwd
        ? (this.repwdState = "success")
        : (this.repwdState = "error");
    },
    checkPhone() {
      var reg = /^1[3-9]\d{9}$/;
      reg.test(this.phone)
        ? (this.phoneState = "success")
        : (this.phoneState = "error");
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>